<template>
  <div class="f_div">
    <div class="t_div">基础资料 / <a href="#">员工管理</a></div>
    <el-container>
      <el-header class="header"
        ><div class="h_div">
          <div class="h_in_vid">
            <el-button type="primary" style="width: 80px" @click="add"
              >新增</el-button
            >
          </div>
        </div></el-header
      >
      <el-header class="header2"
        ><div class="h_div">
          <el-row :gutter="2">
            <el-col :span="6">
              <el-form
                label-width="auto"
                style="max-width: 1000px"
              >
                <el-form-item label="所属角色">
                  <el-select
                    v-model="value2"
                    placeholder="所属角色"
                    style="width: 540px"
                  >
                    <el-option
                      v-for="item in option"
                      :key="item.role_id"
                      :label="item.role_name"
                      :value="item.role_id"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="4"
              ><el-input
                style="width: 200px; margin-left: 16px; margin-right: 16px"
                v-model="value"
                placeholder="请输入姓名搜索"
              ></el-input
            ></el-col>
            <el-col :span="3"
              ><el-button type="primary" style="width: 80px" @click="search"
                >搜索</el-button
              >
              <el-button style="width: 80px" @click="reset"
                >重置</el-button
              ></el-col
            >
          </el-row>
        </div>
      </el-header>
      <el-main class="main">
        <el-table
          height="442px"
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            background: '#F7F7F7',
            color: '#999',
            textAlign: 'center',
          }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            prop="emp_id"
            label="员工ID"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="emp_account"
            label="员工账号"
            width="140"
          ></el-table-column>
          <el-table-column
            prop="emp_name"
            label="姓名"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="depart_id"
            label="所属部门"
            width="320"
          ></el-table-column>
          <el-table-column
            prop="role_name"
            label="所属角色"
            width="140"
          ></el-table-column>
          <el-table-column prop="emp_status" label="员工状态" width="140">
            <template #default="scoped">
              <el-button link type="success" v-if="scoped.row.emp_status == 0">
                启用
              </el-button>
              <el-button link type="danger" v-if="scoped.row.emp_status == 1">
                禁用
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="create_by"
            label="创建人"
            width="140"
          ></el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="200">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scoped">
              <el-button link type="primary" @click="edit(scoped.row.vc_id)">
                编辑
              </el-button>
              <el-button link type="danger" @click="remove(scoped.row.vc_id)" v-if="scoped.row.role_name != '系统管理员'">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[4, 6, 8, 10]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import $http from "@/axios/base";
export default {
  name: "app",
  setup() {
    let value2 = ref("");
    let value = ref("");
    let tableData = ref([]);
    let currentPage = ref("1");
    let pageSize = ref("10");
    let background = ref(true);
    let count = ref(0);
    let router = useRouter();
    let option = ref();
    //添加
    function add() {
      router.push({
        path: "/EmployeeEdit",
        query: { name: "新增员工信息", id: 0 },
      });
    }

    //展示
    function show() {
      $http
        .get(
          `http://localhost:5261/api/Employee/GetAll/${currentPage.value},${pageSize.value}`,
          {
            params: {
              uid: value2.value == ""? 0 : value2.value,
              value: value.value,
            },
          }
        )
        .then((res) => {
          tableData.value = res;
          res.forEach((item, index) => {
            tableData.value[index].create_time = new Date(item.create_time)
              .toISOString()
              .slice(0, 10)
              .toString();
              getDepart(item.depart_id, index);
              getRoleId(item.emp_id, index);
          });
        })
        .catch((err) => console.log(err));
    }

    //个数
    function getCount() {
      $http
        .get("http://localhost:5261/api/Employee/GetCount", {
          params: {
            uid: value2.value == ""? 0 : value2.value,
            value: value.value,
          },
        })
        .then((res) => {
          count.value = res;
        })
        .catch((err) => console.log(err));
    }

    function handleSizeChange(number) {
      pageSize.value = number;
      show();
    }

    function handleCurrentChange(number) {
      currentPage.value = number;
      show();
    }

    function getRole() {
      $http
        .get("http://localhost:5261/api/Employee/GetTypeRole")
        .then((res) => {
          option.value = res;
        })
        .catch((err) => console.log(err));
    }

    //转日期yyyy-MM-dd
    function formatDate(date) {
      let year = date.getFullYear();
      let month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月份从0开始，所以要加1
      let day = date.getDate().toString().padStart(2, "0");
      return `${year}-${month}-${day}`;
    }

    //重置
    function reset() {
      value.value = "";
      value2.value = "";
    }

    //搜索
    function search() {
      show();
      getCount();
    }

    //编辑
    function edit(id) {
      router.push({
        path: "VehiclesEdit",
        query: { id: id, name: "编辑车辆" },
      });
    }

    //删除
    function remove(id) {
      ElMessageBox.confirm("确认是否删除？", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
        draggable: true,
        overflow: true,
        lockScroll: false, //防止抖动
      })
        .then(() => {
          $http
            .delete(`http://localhost:5261/api/Vehicles/DelVehicles/${id}`)
            .then((res) => {
              show();
              getCount();
              ElMessage.success("删除成功");
            })
            .catch((err) => console.log(err));
        })
        .catch(() => {
          ElMessage.info("取消操作");
        });
    }

    const getDepart = (id, index) => {
      $http.get(`http://localhost:5261/api/Employee/GetDeparts/${id}`)
      .then((res) => {
        tableData.value[index].depart_id = res.ment_Depart;
      })
      .catch((err) => console.log(err))
    }

    const getRoleId = (id, index) => {
      $http.get(`http://localhost:5261/api/Employee/GetRoles/${id}`)
      .then((res) => {
        res.create_time = tableData.value[index].create_time;
        res.create_by = tableData.value[index].create_by;
        Object.assign(tableData.value[index], res);
      })
      .catch((err) => console.log(err))
    }

    onMounted(() => {
      getRole();
      show();
      getCount();
    });

    return {
      value,
      value2,
      tableData,
      currentPage,
      pageSize,
      background,
      count,
      router,
      option,
      add,
      edit,
      reset,
      remove,
      search,
      getCount,
      formatDate,
      handleSizeChange,
      handleCurrentChange,
    };
  },
};
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: right;
  margin-top: 20px;
}
.t_div {
  margin-bottom: 20px;
  text-align: left;
  font-size: 14px;
  color: #b3b4b6;
}
a {
  text-decoration: none;
}
.f_div {
  padding: 0px 50px;
}
.h_div {
  height: 39px;
  margin-top: 15px;
}
.h_in_vid {
  width: 800px;
  height: 20px;
  margin-top: 20px;
  display: flex;
}
.header {
  background-color: #ffffff;
  border-radius: 10px 10px 0px 0px;
}
.header2 {
  background-color: #ffffff;
}
.main {
  background-color: #ffffff;
  border-radius: 0px 0px 10px 10px;
  height: 650px;
}
</style>